<template>
	<div class="page">
		<mt-header title="商品车列表">
			<router-link to="" slot="left">
				<img class="back" :src="staticImgData.back" @click="$router.back(-1)" alt="">
			</router-link>
		</mt-header>
		<div v-if="carList.length === 0" class="mt46 f14 pad15 mt20 ta-c c-666 noInfo">
			暂无商品车信息
		</div>
		<div v-else class="list-box">
			<div class="list-con" v-for="(item,index) in carList" :key="index">
				<div class="list-mark">
					<p class="list-num">车架号：<span>{{item.vin}}</span></p>
				</div>
				<div class="list-detail">
					<div class="list-address">
						<p>{{item ? (item.originLocationCity+item.originLocationCounty) : ''}}</p>
						<div class="img">
							<img class="car" :src="staticImgData.car" alt="">
							<img class="line" :src="staticImgData.line" alt="">
						</div>
						<p>{{item ? (item.destLocationCity+item.destLocationCounty) : ''}}</p>
					</div>
					<div class="list-text">
						<p>车型：</p>
						<p>{{item ? item.vehicleType : ''}}</p>
					</div>
					<div class="list-text">
						<p>体积</p>
						<p>{{item.isModVehicle=='N' ? item.volume : item.modVehicleSize}}</p>
					</div>
					<div class="list-text">
						<p>体重</p>
						<p>{{item ? item.tonage : ''}}</p>
					</div>
				</div>
			</div>
		</div>
		<v-loading v-show="loadingShow"></v-loading>
	</div>
</template>

<script>
	import { Header, Toast } from 'mint-ui'
	import Loading from '@/components/common/loading/loading'
	import * as BidApi from '@/api/bid'
	import * as ThreeStorage from '@/utils/store/token.js'
	export default {
	  name: 'bid-carList',
	  data() {
	    return {
	      loadingShow: false,
	      staticImgData: {
	        car: require('@/assets/image/v1/bid/car@2x.png'),
	        back: require('@/assets/image/v1/bid/back@2x.png'),
	        line: require('@/assets/image/v1/bid/line@2x.png')
	      },
	      carList: [],
	      carListParam: {
	        inquiryId: ThreeStorage.getDealListInfo().id
	      },
	      originLocationCity: ThreeStorage.getDealListInfo().originLocationCity, // 始发地
	      destLocationCity: ThreeStorage.getDealListInfo().destLocationCity// 目的地,
	    }
	  },
	  components: {
	    Header,
	    'v-loading': Loading
	  },
	  created() {
	    this.getCarList()
	  },
	  methods: {
	    getCarList() {
	      this.loadingShow = true
	      BidApi.getBidCarList(this.carListParam).then(res => {
	        console.log(res)
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.carList = res.data
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	/* common */
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: #ebf0f6;
	}
	.list-box{
		margin-top: 56px;
	}
	.list-con{
		margin: 10px 0.16rem 0 0.16rem;
		background: #fff;
		border-radius: 0.1rem;
	}
	.list-con:last-child{
		margin-bottom: 10px;
	}
	.list-mark{
		height: 0.47rem;
		text-align: left;
		border-bottom: 1px solid #eaf0f5;
	}
	.list-num{
		line-height: 0.47rem;
		font-size: 0.15rem;
		font-weight: bold;
		color: #434343;
		padding-left: 0.16rem;
	}
	.list-num span{
		color: #ff5544;
	}
	.list-state{
		width: 0.55rem;
		height: 0.22rem;
		text-align: center;
		line-height: 0.22rem;
		color: #fff;
		background: #ff9013;
		border-radius: 0 0 0.05rem 0.05rem;
		position: absolute;
		top: 0;
		right: 0.16rem;
	}
	.list-address{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0.24rem 0 0.21rem 0;
	}
	.list-address p{
		flex: 30%;
	}
	.list-address img{
		width: .2rem;
		height: .3rem;
	}
	.list-address{
		font-size: 0.18rem;
		font-weight: bold;
		color: #3f8afd;
	}
	.list-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.16rem .12rem 0.16rem;
		font-size: 0.14rem;
		color: #989898;
	}
</style>
